import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import Fade from '@mui/material/Fade';
import {CircularProgress} from "@mui/material";

const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    display: 'flex',
};

export default function Loading(props) {
    const [open, setOpen] = React.useState(false);
    if(props.open !== open){
        setOpen(props.open)
    }

    return (
        <div>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                open={open}
                onClose=''
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 500,
                }}
            >
                <Fade in={open}>
                    <Box sx={style}>
                        <CircularProgress sx={{marginRight:5}} size={80}/>
                    </Box>
                </Fade>
            </Modal>
        </div>
    );
}